<template>
  <div class="randomPreview">
    <el-form :data="dialog">
      <!-- 第一行 -->
      <el-row>
        <el-col :span="6">
          <span
            >【题型】 ：{{
              dialog.questionType == 1
                ? "单选"
                : dialog.questionType == 2
                ? "多选"
                : "简答"
            }}</span
          >
        </el-col>
        <el-col :span="6">
          <span>【编号】 ：{{ dialog.id }}</span>
        </el-col>
        <el-col :span="6">
          <span>
            【难度】 ：
            <span v-if="dialog.difficulty == 1">简单</span>
            <span v-if="dialog.difficulty == 2">一般</span>
            <span v-if="dialog.difficulty == 3">困难</span>
          </span>
        </el-col>
        <el-col :span="6">
          <span>【标签】 ：{{ dialog.tags }}</span>
        </el-col>
      </el-row>
      <br />
      <!-- 第二行 -->
      <el-row>
        <el-col :span="6">
          <span>【学科】 ：{{ dialog.subjectID }}</span>
        </el-col>
        <el-col :span="6">
          <span>【目录】 ：{{ dialog.catalogID }}</span>
        </el-col>
        <el-col :span="6">
          <span>【方向】 ：{{ dialog.direction }}</span>
        </el-col>
      </el-row>
      <br />
      <hr />

      <div>
        <p>
          【题干】 ：
          <span style="color: blue" v-html="dialog.question"></span>
        </p>
        <!-- 单选选项 -->
        <div v-if="dialog.questionType == 1">
          <p>单选题 选项：（以下选中的选项为正确答案）</p>
          <el-radio
            v-for="item in dialog.options"
            :key="item.id"
            style="width: 100%; margintop: 20px"
          >
            {{ item.code }} . {{ item.title }}
          </el-radio>
        </div>

         <!-- 多选 -->
        <div v-if="dialog.questionType == 2">
          <p>多选题 选项：（以下选中的选项为正确答案）</p>
          <el-checkbox
            v-for="item in dialog.options"
            :key="item.id"
            style="width: 100%; margintop: 20px"
          >
            {{ item.code }} . {{ item.title }}
          </el-checkbox>
        </div>
      </div>
      <p>
        【参考答案】 ：
        <!-- <span v-html="dialog.answer"></span> -->
        <el-button type="danger" size="small" @click="videoAnswer">视频答案预览</el-button>
      </p>
      <video
          v-if="isShowVideo"
          :src="dialog.videoURL"
          controls="controls"
          style="
            background-color: rgb(0, 0, 0);
            width: 100%;
            height: 100%;
            display: block;
          "
        ></video>
      <hr />
      <p>【答案解析】 ：</p>
      <hr />
      <p>【题目备注】 ：</p>
      <span  class="dialog-footer">
        <el-button type="primary" @click="dialogVisible"
          >关闭</el-button
        >
      </span>
    </el-form>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions'
export default {
  name: 'RandomPreview',
  props: ['detailId'],
  components: {},
  data () {
    return {
      dialog: {},
      isShowVideo: false
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getdialog()
    console.log(this.detailId)
  },
  mounted () {},
  methods: {
    async getdialog (detailId) {
      const { data: res } = await detail({ id: this.detailId })
      console.log('detail', res)
      this.dialog = res
      console.log('dialog', this.dialog)
    },
    videoAnswer () {
      const videoSrc = this.dialog.videoURL
      console.log(videoSrc, '视频链接')
      if (!videoSrc) {
        return
      }
      this.isShowVideo = !this.isShowVideo
    },
    dialogVisible () {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style scoped lang = "less">
</style>
